<template>
	<div class="photo-detail-contioner">
		<vue-preview :slides="thumbs"></vue-preview>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				id:this.$route.params.id,
				thumbs:[]
			}
		},
		created() {
			this.getThumbInfo();
			//mui.previewImage();
		},
		methods:{
			getThumbInfo(){
				this.$http.get("/myvue/photo/detail?id="+this.id).then(res=>{
					// 循环每个图片数据，补全图片的宽和高
					res.body.forEach(item => {
						item.w = "600";//设置以大图浏览时的宽度
						item.h = "400";
						item.src = item.imgUrl;
						item.msrc = item.imgUrl;
					});
					this.thumbs = res.body;
				});
			}
		},
		mounted() {
			
		}
	}
</script>

<style lang="less" scoped="scoped">
	.photo-detail-contioner{
		 /deep/ .my-gallery{   //deep深层作用选择器
			display: flex;
			flex-wrap:wrap;//默认换行
			figure{
				width: 100%;
				margin: 3px;
				img{
					width: 100%;
					box-shadow: 0 0 8px #999;
					border-radius: 5px;
				}
			}
		}
	}
</style>
